<template>
	<div class="leave">
		<!--<p class="leP1">请假</p>-->
		<el-breadcrumb class="leP1" separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">考勤</el-breadcrumb-item>
		  <el-breadcrumb-item>请假</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="leaveDown">
			<!--请假条开始-->
			<div class="leaveTip">
				<el-form ref="form" :model="form" label-width="80px">
				  <p class="leaveAdd">请假申请表</p>
				  <el-form-item label="申请人">
				    <el-input v-model="form.name"></el-input>
				  </el-form-item>
				  <el-form-item label="时间">
				    <el-col :span="11">
				      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
				    </el-col>
				    <el-col class="line" :span="2">至</el-col>
				    <el-col :span="11">
				      <el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 100%;"></el-date-picker>
				    </el-col>
				  </el-form-item>
				  <el-form-item label="原因">
				    <el-input type="textarea" v-model="form.reason"></el-input>
				  </el-form-item>
				  <el-form-item>
				    <el-button type="primary" @click="onSubmit">提交申请</el-button>
				    <el-button @click="reset">重置</el-button>
				  </el-form-item>
				</el-form>
			</div>
			<!--请假条结束-->
			<div class="leaveList">
				<p class="leRecord">请假记录</p>
				<div class="leTable">
					<el-table				  	
					    :data="tableData2.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
					    style="width: 100%">
					    <el-table-column label="姓名" prop="name"></el-table-column>
					    <el-table-column label="起始日期" prop="date1"></el-table-column>
					    <el-table-column label="结束日期" prop="date2"></el-table-column>
					    <el-table-column label="总计/天" prop="day"></el-table-column>
					    <el-table-column label="状态" prop="situation"></el-table-column>
					    <el-table-column align="right">
					      <template slot="header" slot-scope="scope">
					        <!--<el-input
					          v-model="search"
					          size="mini"
					          placeholder="输入关键字搜索"/>-->
					          <p>操作</p>
					      </template>
					      <template slot-scope="scope">				      	
					        <el-button
					          v-show="'放假中'==scope.row.situation"
					          size="mini"
					          @click="handleEdit(scope.$index, scope.row)">销假</el-button>
					        <!--<el-button
					          size="mini"
					          type="danger"
					          @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
					      </template>
					    </el-table-column>				    
					</el-table>
					  <!--分页开始-->
					 <div class="block">
					    <!--<span class="demonstration">直接前往</span>-->
					    <el-pagination
					      @size-change="handleSizeChange"
					      @current-change="handleCurrentChange"
					      :current-page.sync="currentPage3"
					      :page-size="100"
					      layout="prev, pager, next, jumper"
					      :total="1000">
					    </el-pagination>
					</div>
				</div>				
			</div>
		</div>		 
	</div>
</template>

<script>
  export default {
    data() {
      return {
//      value1: [new Date(), new Date()],
        tableData2: [
	        {
	          name: '王小虎',
	          date1: '2016-05-02',
	          date2: '2016-05-02',
	          day: 2,
	          reason: '请假请假请假请假请假请假请假请假请假请假请假请假',
	          situation:'放假中'
	        },
	        {
	          name: '王小虎',
	          date1: '2016-05-02',
	          date2: '2016-05-02',
	          day: 2,
	          reason: '请假请假请假请假请假请假请假请假请假请假请假请假',
	          situation:'不批'
	        },
	        {
	          name: '王小虎',
	          date1: '2016-05-02',
	          date2: '2016-05-02',
	          day: 2,
	          reason: '请假请假请假请假请假请假请假请假请假请假请假请假',
	          situation:'不批'
	        },
	        {
	          name: '王小虎',
	          date1: '2016-05-02',
	          date2: '2016-05-02',
	          day: 2,
	          reason: '请假请假请假请假请假请假请假请假请假请假请假请假',
	          situation:'已批'
	        }
        ],
        search: '',
        form: {
          name: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          reason: ''
        },
        currentPage3: 5
      };
    },
    methods: {
      onSubmit() {
        this.$confirm('此操作将提交, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已提交!'
          });
          console.log(this._data)
          console.log(this._data.form.date1.toLocaleString())
          var date = this._data.form.date1
	      var y = date.getFullYear()
	      var m = date.getMonth()+1
	      var d = date.getDate()
	      var vstart = y+'-'+m+'-'+d
	      console.log(vstart)
	      
	      var date2 = this._data.form.date2
	      var y = date2.getFullYear()
	      var m = date2.getMonth()+1
	      var d = date2.getDate()
	      var vend = y+'-'+m+'-'+d
	      console.log(vend)
	      console.log(this._data.form.reason)
	      console.log(this)
	      
	      var sArr = vend.split("-");
		  var eArr = vstart.split("-");
		  var sRDate = new Date(sArr[0], sArr[1], sArr[2]);
		  var eRDate = new Date(eArr[0], eArr[1], eArr[2]);
		  var day = (sRDate-eRDate)/(24*60*60*1000); 
	      
	      //添加进数组
	      this.tableData2.unshift({
	      	name:this._data.form.name,
	      	date1:vstart,
            date2:vend,
            day: day,
            reason:this._data.form.reason,
            situation:'未批'
	      })
	      //把数据传到另外一个页面
//	      this.$router.push({
//	      	name:'auditing2',
//	      	params:{
//		  		name:this._data.form.name,
//		      	date1:vstart,
//		        date2:vend,
//		        day: 2,
//		        reason:this._data.form.reason,
//		        situation:'未批'
//	      	}
//	      })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      reset(){
      	console.log(this.form.reason)
      	this.form.name = ''
      	this.form.date1 = ''
      	this.form.date2 = ''
      	this.form.reason = ''
      },
      open() {
        this.$confirm('此操作将申请销假, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '申请成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消申请'
          });          
        });
      },
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleEdit(index, row) {
        console.log(index, row.situation);
//      console.log(data.tableData2.situation)
      },
    }
  };
</script>

<style>
.leave{
	width: 100%;
	
}
.leP1{
	font-size: 20px;
	border-bottom: 1px solid grey;
	margin-bottom: 10px;
	padding:10px;
}
.leave .block{
	/*margin: 20px auto;*/
	/*text-align: center;*/
}
.leave .block>.demonstration{
	display: block;
	margin-bottom: 10px;
}
.leaveDown{	
	display: flex;
}
.leaveTip{
	flex: 1;
	/*background-color: yellow;*/
	margin-right: 10px;
	border: 1px solid rgba(0,0,0,0.1);
}
.leaveTip .el-form{
	padding: 10px;
}
.leaveTip .leaveAdd{
	text-align: center;
	padding: 10px;
}
.leaveTip .el-input--suffix .el-input__inner{
	padding-right: 23px;
	font-size: 12px;
}
.leaveList{
	flex: 2;
	box-sizing: border-box;
	/*border: 5px dashed greenyellow;*/
    border: 1px solid rgba(0,0,0,0.1);
	margin-right: 10px;
}
.leaveList .leRecord{
	text-align: center;
	padding: 10px;
}
/*.leTable{
	border: 1px solid gray;
}
.leaveTable{  
width: 100%;
border-collapse: collapse;
}
.leaveTable tr th{
	width: 15%;
}
.leaveTable tr td{
	width: 15%;
	text-align: center;
}*/
/*.leaveCheck{
	text-align: center;
}*/
.leTable .el-table th>.cell{
	text-align: center;
}
.leTable .el-table .cell{
	text-align: center;
}
</style>